<template>
  <a-row>
    <a-col>
      <TableCard :title="false">
        <div slot="table-card">
          <!-- 查询表格 -->
          <vxe-grid ref="xTable" v-bind="gridOptions" :export-config="{}" @radio-change="radioChange" transfer>
            <!-- 新增按钮 -->
            <template #toolbar_buttons>
              <vxe-button @click="handleAdd" status="primary">新增</vxe-button>
            </template>
            <!--操作按钮-->
            <template #operate="{ row }">
              <a @click="handleEdit(row)">编辑</a>
              <a-divider type="vertical" />
              <a @click="handleAssignUser(row)">用户</a>
              <a-divider type="vertical" />
              <a @click="handleAuthorization(row)">资源</a>
              <a-divider type="vertical" />
              <a-dropdown>
                <a class="ant-dropdown-link">
                  更多
                  <a-icon type="down" />
                </a>
                <a-menu slot="overlay">
                  <a-menu-item>
                    <a href="javascript:;" @click="handleDetail(row)">详情</a>
                  </a-menu-item>
                  <a-menu-item>
                    <a href="javascript:;" @click="removeEvent(row)">删除</a>
                  </a-menu-item>
                </a-menu>
              </a-dropdown>

            </template>
          </vxe-grid>
          <!-- modal And Form -->
          <RoleModal ref="modalForm" :title="title">
            <RoleForm v-if="title === '新增' || title === '编辑' || title === '详情'" slot="form" ref="form" :is-modal="title" @reloadData="reloadData"></RoleForm>
            <AssignUserForm v-else-if="title === '分配用户'" slot="form" ref="form1" :is-modal="title" @closeModal="closeModal"></AssignUserForm>
            <AssignResourcesForm v-else-if="title === '分配资源'" slot="form" ref="form2" :is-modal="title" @closeModal="closeModal"></AssignResourcesForm>
          </RoleModal>
        </div>
      </TableCard>
    </a-col>
  </a-row>
</template>

<script>
import TableCard from '@/components/Card/TableCard'
import { getRoleList, roleDelete } from '@/api/system'
import RoleModal from '@/views/system/RoleManagement/modules/RoleModal'
import RoleForm from '@/views/system/RoleManagement/modules/RoleForm'
import AssignUserForm from '@/views/system/RoleManagement/modules/AssignUserForm'
import AssignResourcesForm from '@/views/system/RoleManagement/modules/AssignResourcesForm'

export default {
  name: 'RoleManagement',
  components: { AssignResourcesForm, AssignUserForm, RoleForm, RoleModal, TableCard },
  data () {
    return {
      title: '',
      gridOptions: {
        height: 800,
        resizable: true,
        showOverflow: 'tooltip',
        highlightHoverRow: true,
        keepSource: true,
        loading: false,
        size: 'medium',
        // 搜索表单配置
        formConfig: {
          titleWidth: 100,
          titleAlign: 'right',
          items: [
            {
              field: 'name',
              title: '角色名称',
              span: 6,
              itemRender: { name: '$input', props: { placeholder: '请输入角色名称' } }
            },
            {
              span: 24,
              align: 'center',
              collapseNode: true,
              itemRender: {
                name: '$buttons',
                children: [{
                  props: {
                    type: 'submit',
                    content: '搜索',
                    status: 'primary'
                  }
                }, { props: { type: 'reset', content: '重置' } }]
              }
            }
          ]
        },
        // 工具栏按钮区配置
        toolbarConfig: {
          custom: true,
          export: true,
          zoom: true,
          refresh: true,
          slots: {
            buttons: 'toolbar_buttons'
          }
        },
        // 分页配置
        pagerConfig: {
          pageSize: 10,
          pageSizes: [5, 10, 15, 20, 50, 100, 200, 500, 1000]
        },
        // 数据代理
        proxyConfig: {
          seq: true, // 启用动态序号代理（分页之后索引自动计算为当前页的起始序号）
          form: true, // 启用表单代理，当点击表单提交按钮时会自动触发 reload 行为
          props: {
            // 自定义响应结果读取的字段，例如返回结果为：{result: [], page: {total: 10}}
            result: 'result',
            total: 'page.total'
          },
          ajax: {
            // 接收 Promise
            query: ({ page, form }) => {
              this.gridOptions.loading = true
              const { currentPage, pageSize } = page
              console.log('form', form)
              const pageParams = {
                size: pageSize,
                current: currentPage,
                name: form.name,
                begin_date: '2021-12-01',
                end_date: '2021-12-31'
              }
              console.log('pageParams', pageParams)
              return new Promise(resolve => {
                getRoleList(pageParams).then(response => {
                  this.gridOptions.loading = false
                  const { records, total } = response.data.data
                  console.log('getRoleList', response.data.data)
                  // for (var record of records) {
                  //   record.roleIds = record.roleIds.map((item) => item)
                  // }
                  resolve({
                    page: {
                      total: total
                    },
                    result: records
                  })
                })
              })
            }
          }
        },
        // 列配置
        columns: [
          { type: 'radio', width: 50 },
          { field: 'id', title: '角色ID', width: 80 },
          { field: 'name', title: '角色名称' },
          { field: 'remark', title: '备注' },
          { field: 'createDate', title: '创建日期' },
          { field: 'updateDate', title: '修改日期' },
          { field: 'sortNum', title: '排序', sortable: true, width: 80 },

          { title: '操作', width: 220, slots: { default: 'operate' } }
        ],
        // 单选框配置
        radioConfig: {
          labelField: 'seq',
          trigger: 'row'
        },
        // 行配置
        rowConfig: {
          isCurrent: true,
          isHover: true
        }
      }
    }
  },
  mounted () {

  },
  methods: {
    closeModal () {
      this.$refs.modalForm.submitLoading = false
      this.$refs.modalForm.showEdit = false
    },
    reloadData (row) {
      console.log('reloadData', row)
      const $table = this.$refs.xTable
      getRoleList().then((res) => {
        console.log(res)
        const { data, code } = res.data
        if (code === 200) {
          $table.reloadData(data.records)
          this.$refs.modalForm.submitLoading = false
          this.$refs.modalForm.showEdit = false
        }
      })
    },
    handleAdd () {
      this.title = '新增'
      this.$refs.modalForm.showEdit = true
      this.$refs.modalForm.modalHeight = 'auto'
      this.$refs.modalForm.disableSubmit = false
      this.$nextTick(() => {
        this.$refs.form.add()
        this.$refs.form.disabledSubmit = false
      })
    },
    handleEdit (row) {
      this.title = '编辑'
      this.$refs.modalForm.modalHeight = 'auto'
      this.$refs.modalForm.showEdit = true
      console.log('editEvent', row)
      this.$nextTick(() => {
        this.$refs.form.edit(row)
        this.$refs.form.disabledSubmit = false
      })
    },
    handleAssignUser (row) {
      this.title = '分配用户'
      this.$refs.modalForm.showEdit = true
      this.$nextTick(() => {
        this.$refs.form1.roleId = row.id
        this.$refs.form1.disabledSubmit = false
        this.$refs.form1.initData()
      })
    },
    handleAuthorization (row) {
      this.title = '分配资源'
      this.$refs.modalForm.showEdit = true
      this.$nextTick(() => {
        this.$refs.form2.roleId = row.id
        this.$refs.form2.disabledSubmit = false
      })
    },
    handleDetail (row) {
      this.title = '详情'
      this.$refs.modalForm.showEdit = true
      this.$nextTick(() => {
        this.$refs.form.Detail(row)
        this.$refs.form.disabledSubmit = true
      })
    },
    removeEvent (row) {
      console.log('removeEvent', row)
      this.$XModal.confirm('您确定要删除该数据?').then(type => {
        const $table = this.$refs.xTable
        if (type === 'confirm') {
          roleDelete(row).then(res => {
            // console.log(res.data)
            const resData = res.data
            if (resData.code === 200) {
              // console.log(resData)
              $table.remove(row)
            }
          })
        }
      })
    },
    radioChange ({ newValue, oldValue, row, rowIndex, $rowIndex, column, columnIndex, $columnIndex, $event }) {
      console.log('row', row)
    }
  }
}
</script>

<style lang='less'>
.control {
  display: flex;
  justify-content: flex-end;
}
</style>
